
<div id="exam-management" ng-controller="account.index" class="row ">


    <div  class="panel col-md-12	col-lg-12">
        <div class="panel-heading">
            <h3 class="panel-title">User Account</h3>
        </div>
        <div class="panel-body">
            <table class="table table-bordered "  id="account-table" >
                <thead>
                <th>Nickname</th>
                <th>Email</th>
                <th>Validated</th>
                <th>OBD Device</th>
                <th>Vehicle</th>
                <th>Remark</th>
                <th>Profile</th>
                </thead>

            </table>
        </div>
    </div>

    <div id="user-profile-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog" style="width:55%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="custom-width-modalLabel">{{selectedAccount.user.email}}</h4>
                </div>
                <div class="modal-body">
                    <h4>OBD Device</h4>
                    <table class="table table-condensed m-0">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>SerialsNumber</th>
                            <th>ProductModel</th>
                            <th>ProduceDate</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat=" obd in selectedAccount.obds">
                            <th scope="row">{{$index+1}}</th>
                            <td>{{obd.serialsNumber}}</td>
                            <td>{{obd.productModel}}</td>
                            <td>{{obd.produceDate}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <hr>
                    <h4>Vehicle</h4>
                    <table class="table table-condensed m-0">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>LicenseNo</th>
                            <th>Vin</th>
                            <th>Model</th>
                            <th>Make</th>
                            <th>Year</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat=" vehicle in selectedAccount.vehicles">
                            <th scope="row">{{$index+1}}</th>
                            <td>{{vehicle.licenseNo}}</td>
                            <td>{{vehicle.vin}}</td>
                            <td>{{vehicle.model}}</td>
                            <td>{{vehicle.make}}</td>
                            <td>{{vehicle.year}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="accountModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">Create New Account</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="paper-add-form" role="form"  >
                        <div class="form-group col-md-12">
                            <label class="col-sm-2 control-label">Email：</label>
                            <div class="col-sm-10">
                                <input ng-model="newAccount.email" type="text" required placeholder="Email" class="form-control" >
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <label class="col-sm-2 control-label">Password：</label>
                            <div class="col-sm-10">
                                <input ng-model="newAccount.password" type="text" required placeholder="Password" class="form-control" >

                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" ng-click="saveAccount()">Save</button>
                </div>
            </div>
        </div>

    </div>

</div>